<template>
	<view class="sec-body">
		<view class="fiexd-top">
			<view class="left-part">
				<label class="my-label">日期</label>
				<text>{{BTIME}}</text>
				<text class="divider"> - </text>
				<text>{{ETIME}}</text>
			</view>
			<view class="filter" @tap="showPopup">筛选 <uni-icon class="my-arrow-down" :class="active?'rotateArrow':''"  type="arrowdown" size="16"></uni-icon></view>
		</view>
		
		<luPopupWrapper ref="luPopupWrapper" 
			class="my-lu-popup"
		    type="top"
		    transition="slider"
		    backgroundColor="#fff"
			width='100%'
			height="100%"
			:top="luTop"
		    :active="active"
		    popupId="my-popup1"
		    :maskShow="true"
		    :maskClick="true">
			<view class="content">
				<form class="uni-form">
					<view class="uni-form-item uni-column">
						<label class="title">开始日期</label>
						<view  class="uni-input" :value="form.startDate" @click="onShowDatePicker('startDate')">{{form.startDate}}</view>
					</view>
					<view class="uni-form-item uni-column">
						<label class="title">结束日期</label>
						<view  class="uni-input" :value="form.endDate" @click="onShowDatePicker('endDate')">{{form.endDate}}</view>
					</view>
					<mx-date-picker :show="showPicker" type="date" format="yyyy-mm-dd" @confirm="onSelected" @cancel="onCancel" />
					
				</form>
				
				<view class="button-group">
					<button class="mini-btn" type="default" size="mini" @tap="closePopup">关闭</button>
					<button class="mini-btn margin-left-btn" type="primary" size="mini" @tap="confirmPopup">确定</button>
				</view>
			</view>
		</luPopupWrapper>
		
		<!-- 内容 -->
		<scroll-view class="uni-scroll-view-list sec-uni-scroll-view-list" scroll-y lower-threshold="50" @scrolltolower="loadMore">
			<uni-collapse v-if="listArr.length" accordion="true">
				<uni-collapse-item :title="list.AAC003+ ' 结算流水号：'+list.AAZ216" v-for="(list, listIndex) in listArr" :key="listIndex"
				 :show-animation="true">
					<view class="sub-content">
						<view class="content">
							<view class="label">身份证号</view>
							<view class="results">{{list.AAC002}}</view>
						</view>
						<view class="content">
							<view class="label">医院名称</view>
							<view class="results">{{list.AKB021}}</view>
						</view>
						<!-- <view class="content">
							<view class="label">审报日期</view>
							<view class="results">{{list.AAE036}}</view>
						</view>
						<view class="content">
							<view class="label">险种大类</view>
							<view class="results">{{list.AAE140_NAME}}</view>
						</view> -->
						<view class="content">
							<view class="label">住院流水号</view>
							<view class="results">{{list.AKC190}}</view>
						</view>
						<!-- <view class="content">
							<view class="label">医疗类别</view>
							<view class="results">{{list.AKA130}}</view>
						</view>
		
						<view class="content">
							<view class="label">个人编码</view>
							<view class="results">{{list.AAC001}}</view>
						</view>
						<view class="content">
							<view class="label">单位编号</view>
							<view class="results">{{list.AAB999}}</view>
						</view> -->
						<view class="content">
							<view class="label">单位名称</view>
							<view class="results">{{list.AAB069}}</view>
						</view>
						<view class="content">
							<view class="label">入院日期</view>
							<view class="results">{{list.AAE372}}</view>
						</view>
						<view class="content">
							<view class="label">出院日期</view>
							<view class="results">{{list.AAE373}}</view>
						</view>
						<view class="content">
							<view class="label">医疗费总额</view>
							<view class="results">{{list.AKC264}}</view>
						</view>
						<view class="content">
							<view class="label">统筹基金支付额</view>
							<view class="results">{{list.AKC260}}</view>
						</view>
						<view class="content">
							<view class="label">起付标准</view>
							<view class="results">{{list.AKC256}}</view>
						</view>
						<view class="content">
							<view class="label">现金支付</view>
							<view class="results">{{list.AKC261}}</view>
						</view>
						<view class="content">
							<view class="label">账户支付</view>
							<view class="results">{{list.AKE034}}</view>
						</view>
						<!-- <view class="content">
							<view class="label">扣款金额</view>
							<view class="results">{{list.AKC265}}</view>
						</view>
						<view class="content">
							<view class="label">扣款原因</view>
							<view class="results">{{list.AAA100}}</view>
						</view> -->
						<view class="content">
							<view class="label">经办人</view>
							<view class="results">{{list.AAE011}}</view>
						</view>
						<view class="content">
							<view class="label">经办日期</view>
							<view class="results">{{list.AAE036}}</view>
						</view>
						<view class="content">
							<view class="label">结算日期</view>
							<view class="results">{{list.AAE209|formatStringyyyyMMddToyyyy_MM_dd}}</view>
						</view>
						<!-- <view class="content">
							<view class="label">扣款原因</view>
							<view class="results">{{list.AAE209}}</view>
						</view>
						<view class="content">
							<view class="label">扣款原因</view>
							<view class="results">{{list.AAA100}}</view>
						</view> -->
						
						<view class="content">
							<view class="label">经办机构支付金额</view>
							<view class="results">{{list.AKE149}}</view>
						</view>
						<view class="content">
							<view class="label">大病救助基金支付</view>
							<view class="results">{{list.AKC706}}</view>
						</view>
						<view class="content">
							<view class="label">公务员补助支付</view>
							<view class="results">{{list.AKC707}}</view>
						</view>
						<view class="content">
							<view class="label">其它基金支付</view>
							<view class="results">{{list.AKC708}}</view>
						</view>
						<view class="content">
							<view class="label">补充医疗保险基金</view>
							<view class="results">{{list.AKE026}}</view>
						</view>
						<view class="content">
							<view class="label">伤残人员医疗保障基金</view>
							<view class="results">{{list.AKE032}}</view>
						</view>
						<view class="content">
							<view class="label">民政补助基金</view>
							<view class="results">{{list.AKE181}}</view>
						</view>
						<view class="content">
							<view class="label">省内外标志</view>
							<view class="results">{{list.SNW_FLAG=='1'?'省内异地就医':'省外异地就医'}}</view>
						</view>
						<!-- <view class="content">
							<view class="label">备用字段1</view>
							<view class="results">{{list.BAC111}}</view>
						</view>
						<view class="content">
							<view class="label">备用字段2</view>
							<view class="results">{{list.BAC112}}</view>
						</view> -->
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<uni-load-more v-if="listArr.length" :status="status" :contentText="contentTxt"></uni-load-more>
			<view v-if="!listArr.length" style="padding:100upx 16upx;text-align: center;">
				<image src="../../static/image/order.png" mode="widthFix" style="width:180upx;"></image>
			</view>
		</scroll-view>
	
	</view>
</template>

<script>
	
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import luPopupWrapper from "@/components/lu-popup-wrapper/lu-popup-wrapper.vue";
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: { uniLoadMore,uniCollapse,uniCollapseItem,uniIcon,luPopupWrapper,MxDatePicker },
		data() {
			const nowDate = new Date();
			const cloneNowDate = new Date();
			const fullYear = nowDate.getFullYear();
			const month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
			const endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
					
			const firstDay = this.$common.getDate(cloneNowDate.setDate(1))
			const lastDate  =this.$common.getDate(cloneNowDate.setDate(endOfMonth))
			return {
				showPicker: false,
				inputName:'startDate',
				luTop:'36px',
				active:false,
				BTIME:firstDay,
				ETIME:lastDate,
				form:{
					startDate:firstDay,
					endDate:lastDate,
				},
				pageIndex:1,
				totalPage:1,
				status:'more',
				contentTxt:{
					contentdown: "查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多",
				},
				listArr:[],
				
			}
		},
		filters:{
			formatStringyyyyMMddToyyyy_MM_dd: function (val){
				if(val){
					var pattern = /(\d{4})(\d{2})(\d{2})/;
					var formatedDate = val.replace(pattern, '$1-$2-$3');
                    return formatedDate;
				}else{
					return "";
				}
			}
		},
		methods: {
			changeShow(item){
				item.expand = !item.expand;
			},
			confirmPopup(){
				if(!this.form.startDate||!this.form.endDate){
					uni.showToast({
						title:'请选择日期',
						image:'../../static/image/info.png',
						duration:2500
					});
					return false;
				}
				
				this.BTIME=this.form.startDate;
				this.ETIME=this.form.endDate;
				this.closePopup();
				this.pageIndex = 1;
				this.getData();
			},
			closePopup(){
				this.active = false;
				this.$refs.luPopupWrapper.close();
			},
			showPopup(){
				if(!this.active){
					this.active = true;
					this.$refs.luPopupWrapper.show();
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			onShowDatePicker(type) {
				 this.showPicker = true;
				 this.inputName = type;
			},
			 onSelected(e) {//选择
			      this.showPicker = false;
			      if(e) {
					  this.form[this.inputName] = e.value
				  }
			},
			onCancel(e){
				 this.showPicker = false;
			},
			getData(){
				var self = this;
				self.status = 'loading'
				//传日期 的题格式是  YYYYMMDD 加中间没有横杠它不认
				this.$request('S1004',
				{   BTIME:this.form.startDate.replace(/-/g, ""),
				    ETIME:this.form.endDate.replace(/-/g, ""),
					PAGENUM:this.pageIndex,
					PAGESIZE:10
				}
				,'POST',function(res){
					console.log(res);
					if(res.data.CODE=='0'){
						self.listArr = self.listArr.concat(res.data.DATA);
						self.totalPage = res.data.PAGESIZECOUNT;
						
						if (res.data.PAGENUM == res.data.PAGESIZECOUNT) {
							self.status = 'noMore'
						} else {
							self.status = 'more'
						}
					}
				})
			},
			loadMore(){
				if(this.pageIndex<this.totalPage){
					this.pageIndex++;
					if(this.pageIndex>this.totalPage){
						this.pageIndex=this.totalPage;
					}
					this.getData();
				}
			}
		},
		mounted(){
			this.getData();
		},
		
		onShow(){
			// #ifdef H5
			this.luTop = '80px';
			// #endif
			
			// #ifdef APP-PLUS || MP
			this.luTop = '36px';
			// #endif
		},
	}
</script>

<style>
	.sub-content {
		padding: 0 30upx;
	}

	.content {
		display: flex;
		justify-content: space-between;
		line-height: 70upx;
		padding: 0 30upx;
		font-size: 15px;
		border-top: 1px dashed #E4E7ED;
	}
</style>
